<template>
	<view class="container">
		<!-- tab栏 -->
		<scroll-view class="scroll-view_H b-t b-b" scroll-x>
			<block v-for="(item, index) in dateArr" :key="index">
				<div class="flex-box" @click="selectDateEvent(index, item)" :style="{ 'box-shadow': index == dateActive ? 'inset 0 -2px 0 0 ' + selectedTabColor : '' }">
					<view class="date-box">
						<text class="days" :style="{ color: index == dateActive ? selectedTabColor : '#333' }">{{ item.week }}</text>
						<text class="date" :style="{ color: index == dateActive ? selectedTabColor : '#333' }">{{ item.date }}</text>
					</view>
				</div>
			</block>
		</scroll-view>
		<!-- 时间选项 -->
		<view class="time-box" v-show="timeArr.length > 0">
			<block v-for="(item, _index) in timeArr" :key="_index">
				<view class="item">
					<view
						class="item-box"
						:class="{ 'disable': (item.is_allow == 0), 'active': (timeActive == item.times)}"

						@click="selectTimeEvent(_index, item)"
					>
						<text>{{item.times}}</text>
						<!-- <text class="all" v-if="item.disable">{{ disableText }}</text>
						<text class="all" v-if="_index == timeActive[0] && !item.disable" style="font-size: 12upx;">开始时间</text>
						<text class="all" v-if="_index == timeActive[1] && !item.disable" style="font-size: 12upx;">结束时间</text> -->
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import { dateData, timeData, timeStamp } from './date.js';
let maxIndex;
export default {
	props: {
		//时间数据
		timeList: {
			type:Array,
			default:[]
		},
		//开始时间选项
		startTime: {
			type: String,
			default: '08:00'
		},
		//结束时间选项
		endTime: {
			type: String,
			default: '18:00'
		},
		// 提前预约的时间
		advanceTime: {
			type: Number,
			default: 0
		},
		// 默认选择的时间段间隔
		timeSlot: {
			type: Number,
			default: 2
		},
		//时间间隔
		timeInterval: {
			type: [Number, String],
			default: 0.5 //半小时
		},
		//选中的tab颜色
		selectedTabColor: {
			type: String,
			default: '#0092D5'
		},
		//选中的时间颜色
		selectedItemColor: {
			type: String,
			default: '#0094D7'
		},

		//禁用显示的文本
		disableText: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			nowDate:'',//当前日期
			dateArr: [], //日期数据
			timeArr: [], //时间数据
			dateActive: 0, //选中的日期索引
			timeActive: [], //选中的时间索引
			oldTimeActive: [], //保存用户筛选的时间
			selectDate: '', //选择的日期数据
			selectTime: [], //选择的时间
			oldSelectTime: '',
			currentTimeStamp: '',
			currentTime: '',
			tabs: 0
		};
	},
	watch: {
	    timeArr: {
	      handler: function(newVal, oldVal) {
	        // console.log("newVal:", newVal);
	        // console.log("oldVal:", oldVal);
	      },
	      deep: true
	    }
	},
	created() {
		//获取日期tab数据
		this.dateArr = dateData();
		let myDate = new Date(),
		M = (myDate.getMonth() + 1).toString(),
		D = myDate.getDate().toString();
		let M1 = (M.length == 2) ? M : ('0'+ M),
		D1 = (D.length == 2) ? D : ('0'+ D);
		this.nowDate = M1 + '-' + D1;
		
		//当前时间戳
		this.currentTimeStamp = Date.now();
		this.currentTime = timeStamp(this.currentTimeStamp).hour;
		
		//处理时间
		this.timeArr = this.timeList
		this.timeArr.map(item => {
				// console.log(item.time)
				let time = item.times.slice(0,5)
				// console.log(time)
				// console.log(this.currentTime)
				// console.log("*********")
			if (time < this.currentTime) {
				this.$set(item,'is_allow',0)
			} 
		}); 
		// console.log(this.timeArr)
		this.selectDate = `${this.dateArr[0]['date']}`;
	},
	methods: {
		selectDateEvent(index, item) {
			// console.log(item)
			this.tabs = 0;
			if (this.currentTimeStamp < item.timeStamp) {
				const endIndex = this.timeSlot / this.timeInterval;
				this.selectTime = [];
				// this.timeArr.map(item => {
				// 	return (item.disable = 0);
				// });
			} else {
				this.selectTime = this.oldSelectTime;
				this.timeArr.map(item => {
					let time = item.time.slice(0,5)
					if (time > this.currentTime) {
						this.$set(item,'is_allow',1)
					} else {
						this.$set(item,'is_allow',0)
					}
				});
			}
			this.dateActive = index;
			// this.selectDate = `${this.dateArr[index]['date']}(${this.dateArr[index]['week']})`;
			// this.$emit('selectTime', `${this.selectDate}${this.selectTime.join('-')}`);
			this.selectDate = `${this.dateArr[index].date}`;
			this.$emit('selectTime', `${this.selectDate}`);
		},
		selectTimeEvent(index, item) {
			if (item.is_allow == 0){
				uni.showToast({
					title: '当前时间不可选',
					icon:'none',
					duration: 1000
				})
				return;
			} 
			if(this.timeActive.indexOf(index) == -1){
			}
			this.selectTime = item.times;
			this.timeActive = item.times
			/* this.tabs++;
			if (this.tabs % 2 == 0) {
				this.$set(this.timeActive, 1, index);
				this.selectTime[1] = this.timeArr[index]['time'];
			} else {
				this.$set(this.timeActive, 0, index);
				this.selectTime[0] = this.timeArr[index]['time'];
			}
			// 判断用户选择的时间是否大于第一次选择的时间
			if (this.timeActive[0] > this.timeActive[1]) {
				const tempTime = this.selectTime[0];
				const tempIndex = this.timeActive[0];
				this.selectTime[0] = this.selectTime[1];
				this.selectTime[1] = tempTime;
				this.$set(this.timeActive, 0, this.timeActive[1]);
				this.$set(this.timeActive, 1, tempIndex);
			}
			// this.timeActive = index
			// this.selectTime = this.timeArr[index]['time'] */
			this.$emit('selectTime', `${this.selectDate},${this.selectTime}`);
		}
	}
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
